<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
				@search="$refs.table.refresh(true)"
				@reset="
					() => {
						(this.queryParam = {}), $refs.table.refresh(true);
						this.startTime = ''
					}
				"
      >
        <!--toolBar-->
        <template slot="toolBtn" slot-scope="scope">
          <a-button
						type="danger"
						icon="delete"
						@click="handleSub($refs.table.selectedRowKeys)"
          >
						{{$ct("delete","删除")}}
          </a-button>
        </template>

        <!--search -->
        <template slot="toolForm">
          <a-form-item :label="$ct('loginTime','登录时间')">
            <a-range-picker style="width: 280px"
							:ranges="{
								'今天': [moment(), moment()],
								'最近一周': [ moment().add(-1, 'W'),moment()],
								'最近一个月': [moment().add(-1, 'M'),moment()] ,
								'最近三个月': [ moment().add(-3, 'M'),moment()]
							}"
							:placeholder="[$ct('StartTime','开始时间'), $ct('EndTime','结束时间')]"
							:valueFormat="'YYYY-MM-DD'"
							@change="startTimeOnChange"
							v-model="startTime"
						/>
          </a-form-item>
          <!--@change="startTimeOnChange"-->
          <a-form-item :label="$ct('loginAccount','登录账号')" class="margin-right-sm">
            <a-input v-model="queryParam.userNameId" :placeholder="$ct('loginAccount','登录账号')"/>
          </a-form-item>
        </template>
      </tool-bar>

      <!--	table	 -->
      <DataGrid
          ref="table"
          :columns="columns"
          :url="url"
          :queryParam="queryParam"
          rowKey="uuid"
          :format-conditions="true"
      >
        <span slot="renderUserNameId" slot-scope="{ text, record, index }">
					{{ record.userName }}/{{  record.userNameId }}
        </span>
        <template slot="renderLogBrowser" slot-scope="{ text, record, index }">
          <a-tooltip>
            <template slot="title">
              {{text}}
            </template>
            {{text}}
          </a-tooltip>
        </template>
      </DataGrid>

    </div>
  </div>
</template>

<!--script-->
<script>
  import moment from 'moment';

  //数据表格组件
  import {DataGrid} from "@/components";
  //方法封装
  import {dataGridMixin} from "@/mixins/dataGridMixin";
  //字典
  import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag'
  import TMultiSelectTag from '@/components/TopVUI/dict/TMultiSelectTag'

  export default {
    name: "Table",
    components: {DataGrid, TDictSelectTag, TMultiSelectTag},
    mixins: [dataGridMixin],
    filters: {},
    data() {
      return {
        columns: [
          {
            title: '登录时间',
            width: 170,
            dataIndex: 'createTime',
						langCode: "loginTime"
          },
          {
            title: '登录账号',
            width: 160,
            dataIndex: 'userNameId',
						langCode: "loginAccount",
            scopedSlots: {
              customRender: 'renderUserNameId'
            }
          },
          {
            title: '登录IP',
            width: 120,
            dataIndex: 'logIp',
						langCode: "loginIp"
          },
          {
            title: '登录设备',
            dataIndex: 'logBrowser',
						langCode: "loginDevice",
            scopedSlots: {
              customRender: "renderLogBrowser"
            }
          }
        ],
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 查询参数
        queryParam: {
        },
        url: {
          getPageSet: '/system/sysLoginLog/getPageSet',
          deleteBatch: '/system/sysLoginLog/deleteBatch'
        },
        startTime:''
      };
    },
    methods: {
      moment,
      startTimeOnChange(val) {
        this.queryParam.startTime = val.join(',')
      }
    },
  };
</script>

<!--style-->
<style scoped lang="less">
  .table {
    background-color: @base-bg-color;
    padding: 24px;
  }
</style>

